<template>
    <div>
        <h2>学生管理</h2>
        <el-row>
            <el-col :span="3"><Add @show="show"></Add></el-col>
            <el-col :span="10"><Search @show="show"></Search></el-col>
        </el-row>
        
        <Update @show="show"></Update>
        <List :students="students" @show="show"
        ></List>
        <Pagination :pagination="pagination" @show="show"></Pagination>
    </div>
</template>
<script>
import List from './List.vue';
import Add from './Add.vue';
import Update from './Update.vue';
import Search from './Search.vue';
import Pagination from './Pagination.vue';
import {find} from '../../services/student';
export default {
    components:{
        List,Add,Update,Search,Pagination
    },
    data(){
        return {
            students:[],
            pagination:{},
            searchParams:{}
        }
    },
    mounted(){
        this.show();
    },
    methods:{
        async show(params = {}){
            if(params.type){
                this.searchParams = params;
            }else{
                params = {...this.searchParams,...params};
            }
            let data = await find(params);   
            this.students = data.rows;
            this.pagination = data;

        }
    }
}
</script>
<style scoped>
h2{
    color:red;
}
</style>